<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    html,body,svg {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <svg>
    <rect x="100" y="100" width="100" height="100" fill="red">
      <!--
        attributeType 取值默认是auto
        如果是auto 就会先从样式表中查找属性 再从XML中查找
      -->
      <animate
        attributeType="XML"
        attributeName="x"
        from="100"
        to="500"
        dur="3s"
        fill="freeze"
        repeatCount="100"
      ></animate>
      <!--
        这两个动画可以同时生效

        repeatCount="indefinite" 无限循环
      -->
      <animate
        attributeType="XML"
        attributeName="fill"
        from="red"
        to="yellow"
        dur="3s"
        fill="freeze"
        repeatCount="indefinite"
      ></animate>
    </rect>
  </svg>
</body>
</html>
